<!--
 * @Author: luojiajun
 * @Email: company.kachun@gmail.com
 * @Date: 2021-07-03 13:40:34
 * @FilePath: /src/components/Table/index.vue
 * @LastEditTime: 2021-07-10 18:00:11
 * @LastEditors: luojiajun
-->
<template>
    <div class="bg-white">
        <div
            class="sh-table pd20"
            :class="classess"
            :style="{ 'min-height': maxHeight + 'px' }"
        >
            <div class="sh-table-title" v-if="tableData.title">
                {{ tableData.title }}
            </div>
            <el-table
                :data="tableData.records"
                border
                class="sh-table-container"
                :max-height="`${maxTableHeight}px`"
                style="width: 100%"
            >
                <el-table-column
                    v-for="item in tableData.coloums"
                    :key="item.props"
                    :label="item.label"
                    :prop="item.props"
                    :align="item.align || 'left'"
                    :show-overflow-tooltip="true"
                >
                    <template slot-scope="scope">
                        <a
                            href="javascript:;"
                            class="is-link"
                            @click="onClick(scope.row)"
                            v-if="item.trigger"
                            >{{ scope.row[item.props] }}</a
                        >
                        <span v-else>{{ scope.row[item.props] }}</span>
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
export default {
    name: "BaseTable",
    props: {
        size: {
            type: String,
            default: "standard" // standard | small | mini
        },
        tableData: {
            type: Object,
            default: () => {
                return {
                    title: "排行榜",
                    coloums: [
                        { label: "", props: "name" },
                        { label: "订阅数", props: "times" }
                    ],
                    records: []
                };
            }
        },
        maxTableHeight: {
            type: Number,
            default: 320
        },
        maxHeight: {
            type: Number,
            type: 420
        },
        customClass: {
            type: String,
            type: ''
        }
    },
    data() {
        return {};
    },
    computed: {
        classess() {
            let classess = [];
            if (this.size) {
                classess.push(`sh-table-${this.size}`);
            }
            if (this.customClass) {
                classess.push(this.customClass)
            }
            return classess;
        }
    },
    methods: {
        onClick(row) {
            this.$emit("click", row);
        }
    }
};
</script>

<style lang="scss" scoped>
.sh-table {
    padding-top: 0px;

    &.sh-table-small {
        min-height: 390px;
    }

    &-title {
        border-bottom: 1px solid #e6e6e6;
        padding: 19px 0 14px 0;
    }
    &-container {
        margin-top: 17px;

        .is-link {
            color: #409eff;
            text-decoration: none;
        }
    }
}
</style>
